<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>信息采集页面</title>
</head>
<link rel="shortcut icon" href="/favicon.ico"/>
<style>
    html,body{
        height: 100%;margin: 0; padding: 0;
    }
    #app{
        height: 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        opacity: 0.8;
        background-image: url("https://mystatic-1257827989.cos.ap-chengdu.myqcloud.com/44d51f4600ff4273a95d88fc8f9b477e.jpeg");
    }
    .el-col{
     background-color: white;
        margin-top: 2rem;
        border: solid 1px #d9e3e6;
        border-radius: 12px;
    }
    .title{
        height: 3rem;
        text-align: center;
    }
    img{
        height: 3rem;

    }
    .el-input{
        margin-top:0.5rem;
        border: solid 1px black;

    }
    .btn-group{
        margin-top: 0.5rem;
        margin-bottom: 0.2rem;
        float: right;
    }
    .grid-content .bg-purple{
        z-index: 9999;
    }
</style>
<body>
<div id="app" >
    <el-row :gutter="20">
        <el-col :span="8" :offset="8"><div class="grid-content bg-purple">
            <div class="title">
             <img src="https://img0.baidu.com/it/u=3653656318,3498798198&fm=26&fmt=auto">
            </div>
            <div class="form_body" v-loading="loading" element-loading-text="拼命拉取中"
                 element-loading-spinner="el-icon-loading">
                <el-input v-model="url" placeholder="请输入公有云域名例如：https://k8mmxxx.cloudcc.com/"></el-input>
                <el-input v-model="user" placeholder="请输入账号，例如：管理员账号"></el-input>
                <el-input show-password v-model="password" placeholder="密码"></el-input>
                <el-input v-model="api" placeholder="对象的api"></el-input>
            </div>

            <div class="btn-group">
                <el-button size="medium" type="info" :disabled="btn_status ==-1?true:false" plain  @click="clear">清空</el-button>
                <el-button size="medium" type="primary" :disabled="btn_status ==-1?true:false"  @click="create">提交</el-button>
            </div>


        </div></el-col>
    </el-row>

</div>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css">
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            url: "",
            user: "",
            password: "",
            api: "",
            btn_status:0,
            loading:false

        },
        methods:{
            create:function(){
                let that=this;
                that.btn_status=-1;
                that.loading=true;
                axios.post('/getdatainfo',{
                        url:that.url,
                        user:that.user,
                        password:that.password,
                        api:that.api
                })
                    .then(function (response) {
                        console.log(response);
                        that.btn_status=0;
                        that.loading=false;
                        let rs=response.data;
                        if(rs=="ok"){
                            that.success_msg();
                        }else{
                            that.warn_msg();
                        }

                    })
                    .catch(function (error) {
                        console.log(error);
                        that.btn_status=0;
                        that.loading=false;
                        that.error_msg();
                    });
            },
            clear:function () {
               this.url="";
               this.user="";
               this.password="";
               this.api="";
            },
            success_msg:function () {
                this.$message({
                    offset : 160,
                    message: '拉取信息完成，请查看数据',
                    type: 'success'
                });
            },
            error_msg:function () {
                this.$message({
                    offset : 160,
                    message: '拉取信息失败，请重试',
                    type: 'error'
                });
            },
            warn_msg:function () {
                this.$message({
                    offset : 160,
                    message: '请检查账号密码，再重试',
                    type: 'warning'
                });
            }
        },
        beforeCreate() {

        },
        created() {

        },
        beforeMount() {

        },
        mounted() {

        },
        beforeUpdate() {

        },
        updated() {

        },
        beforeDestroy() {

        },
        destroyed() {

        },
    })
</script>
